<template>
	<view class="wrap">
		<view class="dev-area">
			<view class="dev-cart">
				<view class="">
					<view class="dev-name">温度</view>
					<image class="dev-logo" src="../../static/temp.png" mode=""></image>
				</view>
				<view class="dev-data">{{temp}} ℃</view>
			</view>
			<view class="dev-cart">
				<view class="">
					<view class="dev-name">湿度</view>
					<image class="dev-logo" src="../../static/humi.png" mode=""></image>
				</view>
				<view class="dev-data">{{humi}} %</view>
			</view>
			<view class="dev-cart">
				<view class="">
					<view class="dev-name">烟雾</view>
					<image class="dev-logo" src="../../static/mq2.png" mode=""></image>
				</view>
				<view class="dev-data">{{humi/10}} %</view>
			</view>
			<view class="dev-cart">
				<view class="">
					<view class="dev-name">台灯</view>
					<image class="dev-logo" src="../../static/led.png" mode=""></image>
				</view>
				<switch :checked="led" @change="onLedSwich" color="#2b9939"/>
			</view>
			<view class="dev-cart v-show" v-show="!beep" style="background: #2b9939">
				<view class="dev-name" style="color: #000;">安全</view>
			</view>
			<view class="dev-cart" v-show="!beep">
				<image class="dev-logo" src="../../static/fan.png" mode=""></image>
				<view class="dev-name" style="color: #000;">风扇</view>
			</view>
			<view class="dev-cart" v-show="beep" style="background: #ff0000">
				<view class="dev-name" style="color: #000;">危险</view>
			</view>
			<view class="dev-cart" v-show="beep" style="background: #2b9939">
				<image class="dev-logo" src="../../static/fan.png" mode=""></image>
				<view class="dev-name" style="color: #000;">风扇</view>
			</view>
		</view>
	</view>
</template>

<script>
	const {
		createCommonToken
	} = require('@/key.js')
	export default {
		data() {
			return {
				temp: '',
				humi: '',
				led: true,
				beep: true,
				token: '',
			}
		},
		onLoad() {
			const params = {
				author_key: '6HeChbWXo5b/0Cw0/nh2OLjEABtvQoHwWXn6qVr2AZJbOybB9C/pBk9mPU96qQj7oUH23jHQS8FZU4hM3w9NQQ==',
				version: '2022-05-01',
				user_id: '395525',
			}
			this.token = createCommonToken(params);
		},
		onShow() {
			this.fetchDevData();
			setInterval(() => {
				this.fetchDevData();
			}, 3000)
		},
		methods: {
			fetchDevData() {
				uni.request({
					url: 'https://iot-api.heclouds.com/thingmodel/query-device-property', //仅为示例，并非真实接口地址。
					method: 'GET',
					data: {
						product_id: '6dgQy5A46r',
						device_name: 'd1'
					},
					header: {
						'authorization': this.token //自定义请求头信息
					},
					success: (res) => {
						console.log(res.data);
						this.beep = res.data.data[0].value === 'true';
						this.temp = res.data.data[3].value;
						this.humi = res.data.data[1].value;
						this.led = res.data.data[2].value === 'true';
					}
				});
			},
			onLedSwich(event) {
				console.log(event.detail.value);
				let value = event.detail.value;
				uni.request({
					url: 'https://iot-api.heclouds.com/thingmodel/set-device-property', //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						product_id: '6dgQy5A46r',
						device_name: 'd1',
						params: {
							"led": value
						}
					},
					header: {
						'authorization': this.token //自定义请求头信息
					},
					success: () => {
						console.log('LED ' + (value ? 'ON' : 'OFF') + ' !');
					}
				});
			}
		}
	}
</script>

<style>
	.wrap {
		padding: 30rpx;
	}

	.dev-area {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.dev-cart {
		height: 150rpx;
		width: 320rpx;
		border-radius: 30rpx;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		box-shadow: 0 0 15rpx #ccc;
	}

	.dev-name {
		font-size: 30rpx;
		text-align: center;
		color: #6d6d6d;
	}

	.dev-logo {
		width: 70rpx;
		height: 70rpx;
		margin-top: 10rpx;
	}

	.dev-data {
		font-size: 50rpx;
		color: #6d6d6d;
	}
</style>